<template>
  <InView animate-class-name="fadeInUp" class="RoadDetail" @in-view="onInView">
    <div class="decorate" />
    <InView class-name="title1" animate-class-name="fadeInLeft" v-if="current > 0" />
    <InView class-name="img1" animate-class-name="fadeIn delay-2x" v-if="current > 0" />
    <InView class-name="title2" animate-class-name="fadeInRight" v-if="current > 1" />
    <InView class-name="img2" animate-class-name="fadeIn delay-2x" v-if="current > 1" />
    <InView class-name="title3" animate-class-name="fadeInLeft" v-if="current > 2" />
    <InView class-name="img3" animate-class-name="fadeIn delay-2x" v-if="current > 2" />
    <InView class-name="desc" animate-class-name="fadeIn" v-if="current > 3" />
    <MapInfo v-if="current > 4" />
    <InView class-name="table" animate-class-name="fadeIn fadeInUp delay-2x" v-if="current > 5" />
  </InView>
</template>
<style lang="scss" scoped>
.RoadDetail {
  height: 2481px;
  background: url('@/assets/images/map-box.png') no-repeat center center;
  background-size: contain;
  position: relative;
  padding-top: 123px;
}

.decorate {
  width: 180px;
  height: 180px;
  background: url('@/assets/images/3.gif') no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -70px;
  left: 0;
  z-index: 2;
}

.title1,
.title2,
.title3 {
  height: 57px;
  background: url('@/assets/images/road-title-1.png') no-repeat 33px center;
  background-size: contain;
  opacity: 0;
}

.title2 {
  margin-top: 82px;
  background: url('@/assets/images/road-title-2.png') no-repeat 509px center;
  background-size: contain;
}

.title3 {
  margin-top: 82px;
  background-image: url('@/assets/images/road-title-3.png');
}

.img1,
.img2,
.img3 {
  height: 203px;
  background: url('@/assets/images/road-img-1.png') no-repeat center center;
  background-size: contain;
  margin-top: 10px;
  opacity: 0;
}

.img2 {
  background-image: url('@/assets/images/road-img-2.png');
}

.img3 {
  background-image: url('@/assets/images/road-img-3.png');
}

.desc3 {
  height: 35px;
  background: url('@/assets/images/road-desc-3.png') no-repeat center center;
  background-size: contain;
  margin-top: 13px;
}

.table {
  height: 503px;
  background: url('@/assets/images/map-table.png') no-repeat center center;
  background-size: contain;
  margin-top: 52px;
  opacity: 0;
}
</style>
<script setup lang="ts">
import MapInfo from '@/views/Home/MapInfo.vue'
import InView from '@/components/InView.vue'
import { ref } from 'vue'
import { sleep } from '@/utils'
const current = ref(0)
async function onInView() {
  for (; current.value < 6; current.value++) {
    await sleep(800)
  }
}
</script>
